<template>
  <div>
    <van-tabs v-model="orderType" @change="onChange">
      <!-- <van-tab title="全部" name="全部">
        <van-empty description="暂无相关订单" />
      </van-tab>
      <van-tab title="待付款" name="待付款">
        <van-empty description="暂无相关订单" />
      </van-tab>
      <van-tab title="待发货" name="待发货">
        <van-empty description="暂无相关订单" />
      </van-tab>
      <van-tab title="待收货" name="待收货">
        <van-empty description="暂无相关订单" />
      </van-tab>
      <van-tab title="已完成" name="已完成">
        <van-empty description="暂无相关订单" />
      </van-tab> -->
      <van-tab
        :title="item"
        :name="item"
        v-for="(item, index) in typeList"
        :key="index"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(orderType)"
        >
          <van-cell v-for="(item, index) in list" :key="index">
            <van-card
              :num="item.count"
              :price="item.total_price"
              :desc="item.cake_description"
              :title="item.cakename"
              :thumb="item.cake_pic"
            >
              <template #tags>
                <van-tag plain type="danger">{{item.status}}</van-tag>
                <van-tag plain type="danger">配送时间{{item.reserve_time}}</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">退款</van-button>
                <van-button size="mini">提醒发货</van-button>
              </template>
            </van-card>
          </van-cell>
        </van-list>
        <van-empty v-show="showEmpty" description="暂无相关订单" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderType: "全部",
      typeList: ["全部", "待付款", "待发货", "待收货", "已完成"],
      list: [],
      loading: false,
      finished: false,
      showEmpty:false,
    };
  },
  mounted () {
    this.getData(this.typeList[0]);
  },
  methods: {
    // 获取订单数据
    getData(orderType) {
      let token = localStorage.getItem("token");
      this.$get("/v1/order/getOrder", {
        token,
        orderType: orderType,
      }).then((res) => {
        // console.log(res.data.data);
        if(res.code==0){
          this.$toast(res.msg);
          this.$router.push('/usercenter');
        }else{
          this.list = res.data.data;
          this.list ==undefined&&(this.showEmpty=true)
          this.finished = true;
        }
      });
    },
    // 切换tab页
    onChange(orderType) {
      this.onLoad(orderType);
    },
    onLoad(orderType) {
      // 异步更新数据
      this.getData(orderType);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>